.passwordGenerator{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px;
    background-color: rgba(24, 123, 244, 0.57);
    color: rgb(219, 215, 215);
    font-size: 18px;
    .container{
        width: 40%;
        padding: 20px;
        height: auto;
        background-color: rgba(0,0,0,0.4);

        .title{
            text-align: center;
            font-size: 1.5rem;
            padding-bottom: 10px;
        }

        .midinput{
            .inputbox{
                width: 100%;
                text-align: center;
                position: relative;
                input{
                    display: inline-block;
                    width: 100%;
                    line-height: 40px;
                    outline: none;
                    padding-left: 10px;
                }
                .icon{
                    display: block;
                    position: absolute;
                    top: 4px;
                    right: 5px;
                    font-size : 40px;
                    color: black;
                    cursor: pointer;
                }
                .icon:hover{
                    transform: scale(0.98);
                }
            }
        }

        // ???


        .conditions{
            >div{
                display: flex;
                justify-content: space-between;
                padding: 10px 0px;
                margin-top: 10px;
                // border-bottom: 1px solid black
            }

            .input:hover{
                cursor: pointer;
            }
            .passinput{
                width: 40px;
            }
            
        }


        .Pasfooter{
            width: 100%;
            line-height: 40px;
            background-color: rgba(0,0,0,0.4);
            .passwordSubmit{
                line-height: 40px;
                font-size: 1.2rem;
                background-color: rgb(131, 177, 233);
                border: 2px solid black;
                border-radius: 10px;
                width: 100%;
                font-weight: 777;
                cursor: pointer;
                &:active{
                    transform: scale(0.98);
                }
            }
        }
    }
}